<template>
	<div class="bigshop">
		<div class="shophead">
			<h3 style="text-align: center; font-size: 1.5625rem;">购物车<i class="el-icon-location-outline"></i></h3>
		</div>
		<div class="smallshop"></div>
		<ul v-for="(item,i) in list">
			<li>
				<div class="smallsmallshop">
					<input type="checkbox" :value="item" v-model="small" @change="findsmall()" />
					<img :src="`${$ip}/api/public/showimg/${item.book.pic}`" min-width="70" height="70" />
					<span>{{item.book.name}}</span>
					<p>￥{{item.price}}</p>
					<div class="addnum">
						<el-button class="jj" @click="addnum(-1,i)"><i class="el-icon-minus"
								style="margin-top: 80px;"></i></el-button>
						<div class="nums">
							<span>{{item.num}}</span>
						</div>
						<el-button class="jaja" @click="addnum(+1,i)"><i class=" el-icon-plus"
								style="margin-top: 80px;">
							</i></el-button>
					</div>
				</div>
			</li>
		</ul>
		<div class="js">
			<ul>
				<li>
					<input type="checkbox" v-model="all" @change="addAll()" />
					<span>全选</span>

				</li>
				<li class="l2">合计:￥{{zj}}</li>
				<li>
					<el-button @click="goorder()">
						<h5>去结算</h5>
					</el-button>
				</li>
			</ul>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'moblieshop',
		data() {
			return {
				list: [],
				arr: [],
				small: [],
				all: '',
				zj: 0
			}
		},
		components: {

		},
		methods: {
			findsmall() {
				this.small = Array.from(new Set(this.small));
				console.log(this.small);
				let kk = 0
				this.small.forEach((item) => {
					kk += item.price * item.num;
				})
				this.zj = kk;
			},
			addAll() {
				console.log(this.all);
				if (this.all) {
					this.list.forEach((item) => {
						this.zj += item.price * item.num;
						this.small.push(item);
					})
				} else {
					this.small = [];
					this.zj = 0;
				}

			},
			addnum(t, i) {
				this.list[i].num = this.list[i].num + t;
				if (this.list[i].num <= 1) {
					this.list[i].num = 1;
				}
				this.findsmall();
			},
			goorder() {
				if (this.small.length > 0) {
					this.$router.push({
						query: {
							user: this.small
						},
						path: '/mobile/mobliegoorder'

					});

				} else {
					this.$message.error('当前并未下单');
				}

			}
		},
		mounted() {
			console.log(this.small);
			this.arr = document.getElementsByClassName('small');
			console.log(this.arr[0]);
			this.$get('/api/fore/cart/findMyCarts').then((resp) => {
				this.list = resp.data.data;
				console.log(resp.data.data);
			});

		}
	}
</script>

<style>
	.bigshop {
		margin-top: -2.5rem;
		font-family: KaiTi;
		background-color: #f1f1f1;
	}

	.shophead {
		background-color: white;
		height: 40px;
	}

	.smallshop {
		margin-top: 0.9375rem;
	}

	.smallsmallshop {
		border-radius: 1.25rem;
		margin: 0 auto;
		margin-top: 1.875rem;
		background-color: white;
		width: 95%;
		height: 8.125rem;
	}

	.smallsmallshop img {
		margin-top: 1.25rem;
		margin-left: 2rem;
		height: 5.625rem;
	}

	.nums {
		width: 40px;
		height: 20px;
		background-color: #b6b6b6;
		border-radius: 20px;
		position: relative;
		top: -40px;
		left: 38px;
	}

	.nums span {
		line-height: 160px;
		margin-left: 10px;
	}

	.addnum {
		display: flex;
		position: relative;
		left: 200px;
		line-height: 15px;
	}

	.addnum button.jj {
		margin-top: -50px;
		width: 50px;
		height: 50px;
		border: none;
		background-color: white;
		position: relative;
		top: -10px;
		left: 30px;

	}

	.addnum button.jaja {
		margin-top: -50px;
		width: 1px;
		height: 50px;
		border: none;
		background-color: white;
		position: relative;
		top: -10px;
		left: 39px;
	}

	.smallsmallshop span {
		position: relative;
		top: -4.375rem;
		left: 0.3125rem;
	}

	.smallsmallshop p {
		position: relative;
		left: 40%;
		top: -25px;
	}

	.smallsmallshop input {
		position: relative;
		top: -2rem;
		left: 1rem;
	}

	.js {
		margin-top: 1.875rem;
		height: 5rem;
		background-color: #c8c8c8;
	}

	.js input {
		position: relative;

		top: 1.9rem;
		left: 15px;
	}

	.js span {
		font-size: 1.25rem;
		position: relative;
		left: 2rem;
		top: 2rem;
	}

	.js li.l2 {
		font-size: 1.25rem;
		margin-left: 7rem;
		margin-top: 0.5rem;
	}

	.js button {
		height: 3.4375rem;
		width: 7.5rem;
		border-radius: 1.25rem;
		background-color: red;
		color: white;
		border: none;
		position: relative;
		left: 65%;
		top: -2.5rem;
	}

	.js h5 {
		font-family: KaiTi;
		position: relative;
		top: -0.9375rem;
		left: -2.5rem;
	}
</style>